<template>
  <div>
<!-- 
    v-if
    语法：v-if="布尔值"（true显示/false隐藏）
    原理：动态的创建或者删除元素节点
    应用的场景不同： v-if开销更大（创建和删除元素）消化性能
                        要么显示 要么隐藏
                        是惰性的，如果一开始初始值是false，那么元素就直接不创建了，节省了初始渲染的开销
 -->
      <div v-if="isShow">if控制的盒子</div>
      <!-- v-show
        语法：v-show="布尔值"（true显示/false隐藏）
        原理：实质上控制的是css的样式  就像display:none
        应用的场景不同：频繁的切换隐藏

      -->
      <div v-show="isShow">show控制的盒子</div>
  </div>
</template>

<script>
export default {
data(){
    return{
        isShow:true
    }
}
}
</script>

<style>

</style>